<template>
  <div class="accessory">
    <!-- 表单搜索 -->
    <div class="form">
      <el-form label-position="right" :inline="true" :model="searchForm">
        <el-form-item label="分类" class="formItem">
          <el-input v-model="searchForm.userName" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="商品名称" class="formItem">
          <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable />
        </el-form-item>
        <el-form-item label="收货地址" class="formItem">
          <el-input v-model="searchForm.addressName" placeholder="请输入收货地址" clearable />
        </el-form-item>
        <el-form-item label="订单状态" class="formItem">
          <el-select v-model="searchForm.status" clearable placeholder="订单状态">
            <el-option label="待发货" value="待发货" />
            <el-option label="已收货" value="已收货" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div v-if="tableList.length > 0" class="table">
      <!-- 表格展示 -->
      <el-table :data="tableList" stripe style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="id" label="订单编号" />
        <el-table-column prop="address.name" label="收货人" />
        <el-table-column label="地址" width="200" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.address.province }}{{ scope.row.address.city }}{{ scope.row.address.area }}{{
              scope.row.address.specific }}
          </template>
        </el-table-column>
        <el-table-column prop="goods.name" label="商品名称" />
        <el-table-column label="商品图片">
          <template #default="scope">
            <el-image :src="scope.row.goods.picture" width="80" />
          </template>
        </el-table-column>
        <el-table-column prop="goods.price" label="价格" />
        <el-table-column prop="num" label="数量" />
        <el-table-column label="订单金额" width="120">
          <template #default="scope">
            {{ scope.row.money }} 元
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="190" />
        <el-table-column prop="payTime" label="支付时间" width="190" />
        <el-table-column v-if="activeName == '待发货'" fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small"
              @click="delivery(scope.row.id)">发货</el-button>
              <el-button link type="warning" size="small"
              @click="showUpdateIndent(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="tableList.length > 0" style="float: right">

      <!-- 分页 -->
      <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15, 20]" :total="pageInfo.total" :disabled="false" background
        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- 空状态 -->
    <div v-if="tableList.length <= 0">
      <el-empty description="暂无数据" />
    </div>
  </div>

  <!-- 修改弹出框 -->
  <el-dialog v-model="updateDialogVisible" title="修改订单数据" width="40%">
    <div class="addForm">
      <el-form label-position="right" :model="updateForm">
        <el-form-item label="收货人" class="addFormItem">
          <el-input v-model="updateForm.address.name" disabled/>
        </el-form-item>
        <el-form-item label="地址" class="addFormItem">
          <el-input v-model="updateForm.addressData" disabled/>
        </el-form-item>
        <el-form-item label="商品名称" class="addFormItem">
          <el-input v-model="updateForm.goods.name" disabled/>
        </el-form-item>

        <el-form-item label="商品名称" class="addFormItem">
          <el-image fit="fit" style="width:100px;" :src="updateForm.goods.picture"/>
        </el-form-item>
        <el-form-item label="商品数量" class="addFormItem">
          <el-input v-model="updateForm.num"  type="number" />
        </el-form-item>
        <el-form-item label="订单价格" class="addFormItem">
          <el-input v-model="updateForm.money"/>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button type="primary" @click="updateData">修改</el-button>
      <el-button type="info" @click="updateDialogVisible = false">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { pageList, shipments, getById, updateById } from '@/api/indent.js';
import {ElLoading,ElNotification} from 'element-plus';

// 分页数据
const pageInfo = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 10,
});

// 搜索表单
const searchForm = reactive({
  indentId: null,
  userId: null,
  userName: null,
  goodsName: null,
  addressName: null,
  status: '待发货'
});

// 修改表单
const updateForm = reactive({
  id: null,
  userId: null,
  user: null,
  addressId: null,
  address: {},
  goodsId: null,
  goods: {},
  num: null,
  money: null,
  createTime: null,
  addressData: null
})

// 表格列表
const tableList = ref([]);
// 表格加载
const tableLoading = ref(false);
// 标签事件
const activeName = ref('待发货');

// 修改弹出框
const updateDialogVisible = ref(false);

onMounted(async () => {
  await search();
})

// 显示修改弹出框
const showUpdateIndent = async(id)=>{
  // 1. 根据id查询订单信息
  const response = await getById(id);
  const data = response.data.data;
  updateForm.id = data.id;
  updateForm.userId = data.userId;
  updateForm.user = data.user;
  updateForm.addressId = data.addressId;
  updateForm.address = data.address;
  updateForm.goodsId = data.goodsId;
  updateForm.goods = data.goods;
  updateForm.num = data.num;
  updateForm.money = data.money;
  updateForm.createTime = data.createTime;
  updateForm.addressData = data.address.province 
      + data.address.city 
      + data.address.area 
      + data.address.specific;
  // 2. 显示修改弹框
  updateDialogVisible.value = true;
}

// 修改订单数据
const updateData = async()=>{
  // 1. 转换为updateForm
  const up = {};
  up.id = updateForm.id;
  up.num = updateForm.num;
  up.money = updateForm.money;
  await updateById(up);

  // 2. 关闭修改弹框
  updateDialogVisible.value = false;

  await search();
}

// 查询
const search = async () => {
  try {
    // 对选择的名字进行修改
    activeName.value = searchForm.status;

    // 开启加载
    tableLoading.value = true;
    const response = await pageList(pageInfo, searchForm);
    tableList.value = response.data.data.list;
    pageInfo.total = response.data.data.total;
  } finally {
    tableLoading.value = false;
  }
}

// 发货
const delivery = async(id)=>{
  const loading = ElLoading.service({ fullscreen: true });
  await shipments(id);
  loading.close();
  // 通知
  ElNotification({
    title: '成功',
    message: '发货成功!',
    type: 'success',
  })
  await search();
}

</script>

<style></style>